iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0

今天我們就要著手開始實作拉!而造順序來的話我們最上方都會有個logo跟導覽列,接下來就讓我們把學過的東西結合開始製作吧!

通常,我們要先用Html把結構建造出來,會有一張圖片logo,以及很多的超連結被包覆在導覽列裡。

<body>
    <div class="header">
        <a class="logo" href="#">
            <img src="1200x630wa.png" alt="">
        </a>
        <nav>
            <a href="">關於我們</a>
            <a href="">活動辦法</a>
            <a href="">下載</a>
            <a href="">產品介紹</a>
            <a href="">客服中心</a>
        </nav>
        
    </div>
</body>


有了這些元素後,我們就可以開始排版囉,設定CSS!

.header img{
            width: 80px;
            height: 100%;
        }

一開始的圖片太大了,我們先設定他的寬度像素,高度就設定100%或是你要的高度。

我們想讓文字與圖片在同一行,就使用display:flex來排版(記得要在外容器設定),並設定背景顏色。

.header{
            display: flex;
            background-color: rgb(184, 176, 176);
        }

把超連結的底線去掉。

.header a{
            text-decoration: none;
        }

我們想讓導覽列的文字置中,並且在最後面。

.header nav{
            display: flex;
            width: 100%;
            justify-content: flex-end;
            line-height: 25px;
            font-size: 0px;
        }

一樣在外容器nav設定排版flex,flex-end是水平排列放在最後的屬性,垂直置中line-height: 25px(設定高度的一半);

這樣子就置中並排版在最後了!但文字間是不是有點擠呢,讓我們來設定padding,順便將文字設定成藍色。

.header nav a{
            display: inline-block;
            padding: 10px;
            color: blue;
            font-size: 16px;
        }

這樣簡單的一個導覽列就完成了!我們還可以做點變化。滑鼠觸碰到時變色!

:hover屬性,碰到時就會改變CSS成hover所設定的內容裡。

我們可以添加當觸碰到超連結時,背景圖片變成黑色!

.header nav a:hover{
            background-color: black;
        }

趕快設定看看吧,增加網頁的趣味性!


上一篇
Day18 CSS網頁開始寫前的準備
下一篇
Day20 CSS Banner與搜尋框
系列文
我的網頁前端小小小教室30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言